// import { Table, Popconfirm, Button } from 'antd';
// // import TableRowSelection from 'antd/lib/table';
// import { OtherCost } from '@/data-type';
// // import {PrivilegeUser} from '@/api-type';
// // import { FormattedMessage } from 'umi'
// import { useState } from 'react';
// import { useHistory } from 'react-router';
// import { FormatterTime } from '@/utils/kits';
// // import { render } from '@umijs/deps/compiled/mustache';
// import React from 'react';
// // import ReactDOM from 'react-dom';
// import { ColumnsType, ColumnType } from 'antd/lib/table'
// import UpdateDrawer from '@/components/common/UpdateDrawer'
// import Calender from './Calender/index'

// const ShowOtherCost: React.FC<{
//   otherCosts: OtherCost[] | undefined,
//   onDelete: (id: number | undefined) => void,
//   onUpdate: (otherCost: OtherCost) => void
// }> = ({
//   otherCosts,
//   onDelete,
//   onUpdate
// }) => {
//     const [showDetail, setShowDetail] = useState(false);
//     const [showDrawer, setShowDrawer] = useState(false);
//     const [currentRow, setCurrentRow] = useState<OtherCost>();
//     //用于路由跳转
//     const history = useHistory();
//     let formRef = React.createRef<any>();
//     function openUpdate(cost: OtherCost) {
//       // console.log("update user", user);
//       setCurrentRow(cost);
//       setShowDetail(true);
//       formRef.current.setFieldsValue(cost);
//     }
//     const onCloseDrawer = () => {
//       setShowDetail(false);
//     }
//     function openDrawer(material: OtherCost) {
//       setCurrentRow(material);
//       setShowDrawer(true);
//     }
//     const tableColumns: ColumnsType<OtherCost> = [
//       {
//         title: 'ID',
//         fixed: false,
//         dataIndex: 'id',
//       },
//       {
//         title: '项目Id',
//         fixed: false,
//         dataIndex: 'programId',
//       },
//       {
//         title: '项目详情Id',
//         fixed: false,
//         dataIndex: 'programDetailId',
//       },
//       {
//         title: '花费类型',
//         fixed: false,
//         dataIndex: 'costType',
//       },
//       {
//         title: '单价',
//         fixed: false,
//         dataIndex: 'unitPrice',
//       },
//       {
//         title: '数量',
//         fixed: false,
//         dataIndex: 'count',
//       },
//       {
//         title: '已支付',
//         fixed: false,
//         dataIndex: 'paid',
//       },
//       {
//         title: '未支付',
//         fixed: false,
//         dataIndex: 'unpaid',
//       },
//       {
//         title: '总额',
//         fixed: false,
//         dataIndex: 'amount',
//       },
//       {
//         title: '状态',
//         fixed: false,
//         dataIndex: 'status',
//       },
//       {
//         title: '备注ID',
//         fixed: false,
//         dataIndex: 'remarkId',
//       },
//       {
//         title: '开始时间',
//         dataIndex: 'startDate',
//         fixed: false,
//         render: FormatterTime,
//       },
//       {
//         title: '结束时间',
//         dataIndex: 'endDate',
//         fixed: false,
//         render: FormatterTime
//       },
//     ];
//     const columns: ColumnsType<OtherCost> = [
//       ...tableColumns,
//       {
//         title: '操作',
//         fixed: 'right',
//         width: '20%',
//         render: (elem: OtherCost) => {
//           return (
//             <div>
//               <Popconfirm title="是否删除?" onConfirm={() => onDelete(elem.id)} >
//                 <Button>删除</Button>
//               </Popconfirm>
//               <Button onClick={() => openUpdate(elem)}>更新</Button>
//               <Button onClick={() => openDrawer(elem)}>暂未启用</Button>
//             </div >
//           );
//         },
//       }
//     ]
//     const rowSelection = {
//       onChange: (selectedRowKeys: React.Key[], selectedRows: OtherCost[]) => {
//         // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
//       },
//       getCheckboxProps: (record: OtherCost) => ({
//         disabled: record.id === 123456, // Column configuration not to be checked
//         name: record.programId.toString(),
//       }),
//     };
//     // console.log("columns", users);
//     return (
//       <div>
//         <Table rowSelection={rowSelection}
//           dataSource={otherCosts}
//           columns={columns}
//           rowKey={'id'}
//           scroll={{ x: 1500 }}
//           onRow={(record) => {
//             return {
//               onDoubleClick: event => {
//                 // alert(record.programName);
//                 history.push("/page/program-detail-component", {
//                   "id": record.id
//                 });
//                 // console.log(record.id);
//               }
//             }
//           }} />
//         {/* <Calender></Calender> */}
//         <UpdateDrawer elem={currentRow as OtherCost}
//           onClose={onCloseDrawer}
//           visible={showDetail}
//           formRef={formRef}
//           updateOne={onUpdate}
//           datas={tableColumns}
//         ></UpdateDrawer>
//       </div>
//     );
//   };
//   export default ShowOtherCost;